<template>
  <div class="start-btn-wrap">
    <img :src="btnimg" alt="点我开始" class="start-btn heartbeat" @click="startGame">
    <!-- <img :src="handImg" class="hand-img ripples  "> -->
    <slot></slot>
  </div>
</template>
<script>
let btnimg = require('./../assets/imgs/start-game-new.png')
export default {
  name: "Hand",
  props:{
    btnimg:{
      type:String,
      default:btnimg
    }
  },
  data () {
    return {
      handImg:require('./../assets/imgs/hand.png')
    };
  },
  computed:{
 
  },
  mounted(){
 
  },
  methods:{
    startGame(){
      this.$emit('handClick')
    }
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common';
@keyframes ripples {
  0%{ transform: scale(.8) }
  10% { transform: scale(.9) }
  20% { transform: scale(1) }
  30% { transform: scale(1.1) }
  40% { transform: scale(1.2) }
  50% { transform: scale(1.3) }
  60% { transform: scale(1.2) }
  70% { transform: scale(1.1) }
  80% { transform: scale(1) }
  90% { transform: scale(.9) }
  100% { transform: scale(.8) }
}
.start-btn-wrap{
  // position: absolute;
  // bottom: 15%;
  width: 100%;
  text-align: center;
  position: relative;
  img.start-btn{
    height:px2rem(112);
  }
  .hand-img{
    position: absolute;
    bottom: px2rem(-40);
    right: 15%;
    width: px2rem(102);
  }
  .ripples{
    animation: ripples 2s linear infinite;
  }
}
</style>